<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="slider" class="slider">
    <div id="thumb" class="thumb"></div>
  </div>

  <script>
    thumb.addEventListener('mousedown', (e) => {
      let shiftX = event.clientX - thumb.getBoundingClientRect().left;
      let shiftY = event.clientY - thumb.getBoundingClientRect().top;

      function onMove (e) {
        let sliderLeft = slider.getBoundingClientRect().left
        let sliderWidth = slider.getBoundingClientRect().width
        const { clientX } = e
        let left = clientX - shiftX - sliderLeft
        if (left < 0) {
          left = 0 + 'px'
        } else if (left > sliderWidth) {
          left = '100%'
        } else {
          left = left + 'px'
        }
        thumb.style.left = left
      }

      function onMoseUp (e) {
        console.log('mouseup', e.target)
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onMoseUp)
      }

      document.addEventListener('mousemove', onMove)

      document.addEventListener('mouseup', onMoseUp)
    })
  </script>

</body>
</html>